<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>组件</title>

    <style>
      .main{clear:both;margin-top:20px}
      .catalog{ width:300px;float:left;text-align:center;background:grey;}
      .product{width:70%;float:right}
      li{list-style:none;width:300px;float:left}
      .ctalog-item{height:50px;line-height:50px}


    </style>
</head>

<body>
<div id="app">
    <app :catalogs="catalogs"  :products="products"><span>hot!</span></app>

</div>


</body>
<script>

  
    let product ={
        props:['product'],
        template:"<li><img :src='product.img' width='100%'>{{product.name}}{{product.price}}</li>",
    }

    let catalog={
        data:function(){
          return {catid:0}
        },
        methods:{
           catshow:function(){
             this.show=!this.show
           }
        },
        props:['catalog'],
        template:"<div >{{catalog.name}}</div>",
        components:{

        }
    }
    //总管理器
    let app={
        methods:{
            choicecat:function(i){// 事件里直接写上 函数名即可 v-on:click="choicecat" 也可以传递参数  v-on:click="choicecat（参数）"
               this.catid=i
            }
        },
        data:function(){
            return {catid:1}//就是目录id
         },
        props:['catalogs','products'],
        template:"<div class='main'>"+// 只能由一个根元素
                  "<div class='catalog' ><catalog  class='ctalog-item' v-for='catalog in catalogs' :catalog='catalog'  @click.native='choicecat(catalog.id)'></catalog></div><ul class='product'  >"+
                  "<product v-for='product in products' :product='product'  v-show='(catid==product.cid)'></product>"+
                 "</ul></div>",//组件里面要使用方法加上修饰符 .native
         components:{
          catalog,
          product,
        }
    }

    new Vue({//最大的父类
      el:"#app",
      data:{
         catalogs:[
           {
             name:'烧烤',
             id:1,
             img:''
           },
           {
             name:'海鲜',
             id:2,
             img:'',
           }
         ],
         products:[
                {
                  cid:1,
                  name:'烤猪脚',
                  price:'20',
                  img:'https://img0.baidu.com/it/u=1643398587,3400884588&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=389'
                },
                 {
                  cid:1,
                  name:'烤猪脚',
                  price:'20',
                  img:'https://img0.baidu.com/it/u=1643398587,3400884588&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=389'
                },
                 {
                  cid:1,
                  name:'烤猪脚',
                  price:'20',
                  img:'https://img0.baidu.com/it/u=1643398587,3400884588&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=389'
                },
                {
                  cid:2,
                  name:'金昌鱼',
                  price:'20',
                  img:'https://img0.baidu.com/it/u=1272688782,2227068255&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=427'
                },
         ],
      },
      //template:'<app  :data="catalogs" />',
      components:{
         app,
      }
    })

</script>

</html>

<!---作业,es2015模块，回顾下，没学预习下, 在上一节课基础之上使用 slot插槽 为不同的目录，添加不同的背景图片-->